<template>
  <div class="zudao-container">
    <h1 class="page-title">足道客户信息管理/查询足道客户</h1>

    <div class="operation-bar">
      <el-select v-model="searchType" placeholder="请选择查询类型" style="width: 180px; margin-right: 15px;">
        <el-option label="会员编号" value="id" />
        <el-option label="姓名" value="name" />
      </el-select>
      <el-input
        v-model="searchKeyword"
        placeholder="请输入查询内容"
        style="width: 240px; margin-right: 15px;"
        @keyup.enter="handleSearch"
      />
      <el-button @click="handleSearch" type="primary" icon="el-icon-search">搜索</el-button>
      <el-button @click="resetSearch" type="info" icon="el-icon-refresh">重置</el-button>
      <el-button @click="fetchCustomers" type="success" icon="el-icon-refresh">刷新数据</el-button>
    </div>

    <el-table
      :data="tableData"
      height="500"
      style="width: 100%"
      class="customer-table"
      stripe
      v-loading="loading"
    >
      <el-table-column prop="date" label="注册日期" width="180" align="center" />
      <el-table-column prop="id" label="会员编号" width="140" align="center" />
      <el-table-column prop="name" label="姓名" width="120" align="center" />
      <el-table-column prop="gender" label="性别" width="140" align="center" />
      <el-table-column prop="age" label="年龄" width="100" align="center" />
      <el-table-column prop="phone" label="电话" width="200" align="center" />
      <el-table-column prop="level" label="足道水平" width="100" align="center">
        <template slot-scope="scope">
          <el-tag :type="getLevelTagType(scope.row.level)">{{ scope.row.level }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="service" label="服务类型" width="200" align="center">
        <template slot-scope="scope">
          <div class="service-display">
            <img :src="getServiceImage(scope.row.service)" class="service-icon" />
            <span class="service-text">{{ scope.row.service }}</span>
          </div>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import axios from 'axios';
import { Message } from 'element-ui';

export default {
  data() {
    return {
      searchType: 'id',
      searchKeyword: '',
      loading: false,
      tableData: [],
      zudaoImages: {
        footMassage: require('@/assets/foot_massage.jpg'), // 路径修正
        reflexology: require('@/assets/reflexology.jpg'),
        aromatherapy: require('@/assets/aromatherapy.jpg'),
        hotStone: require('@/assets/hot_stone.jpg'),
        fullBody: require('@/assets/full_body.jpg')
      }
    };
  },
  methods: {
    fetchCustomers() {
      this.loading = true;
      axios.get('/api/zudao/listzudao')
        .then((response) => {
          this.tableData = response.data.data || [];
          Message.success('数据加载成功');
        })
        .catch((error) => {
          Message.error('获取客户数据失败');
          console.error(error);
        })
        .finally(() => {
          this.loading = false;
        });
    },
    handleSearch() {
      if (!this.searchKeyword.trim()) {
        this.fetchCustomers();
        return;
      }

      this.loading = true;

      const params = {};
      if (this.searchType === 'id') {
        const idNumber = parseInt(this.searchKeyword, 10);
        if (isNaN(idNumber)) {
          Message.warning('会员编号必须是数字');
          this.loading = false;
          return;
        }
        params.id = idNumber;
      } else {
        params.name = this.searchKeyword;
      }

      axios.get('/api/zudao/searchzudao', { params })
        .then((response) => {
          if (response.data.code === 200) {
            this.tableData = response.data.data || [];
            if (this.tableData.length === 0) {
              Message.warning('未找到匹配的客户');
            }
          } else {
            Message.error(response.data.message || '搜索失败');
          }
        })
        .catch((error) => {
          Message.error('搜索过程中出错');
          console.error(error);
        })
        .finally(() => {
          this.loading = false;
        });
    },
    resetSearch() {
      this.searchType = 'id';
      this.searchKeyword = '';
      this.fetchCustomers();
    },
    getLevelTagType(level) {
      const map = {
        '初级': 'info',
        '中级': '',
        '高级': 'warning',
        '专家级': 'success'
      };
      return map[level] || '';
    },
    getServiceImage(service) {
      const map = {
        '足部按摩': this.zudaoImages.footMassage,
        '足底反射疗法': this.zudaoImages.reflexology,
        '芳香疗法': this.zudaoImages.aromatherapy,
        '热石按摩': this.zudaoImages.hotStone,
        '全身按摩': this.zudaoImages.fullBody
      };
      return map[service] || '';
    }
  },
  mounted() {
    this.fetchCustomers();
  }
};
</script>

<style scoped>
.zudao-container {
  padding: 20px;
  background-color: #f5f7fa;
  min-height: 100vh;
}

.page-title {
  color: #333;
  font-size: 24px;
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 1px solid #ebeef5;
}

.operation-bar {
  margin-bottom: 20px;
  display: flex;
  align-items: center;
}

.customer-table {
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  border-radius: 4px;
  overflow: hidden;
}

.service-display {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px 0;
}

.service-icon {
  width: 48px;
  height: 48px;
  margin-right: 12px;
  object-fit: contain;
}

.service-text {
  font-size: 14px;
}
</style>
